<template>
	<view>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">银行卡号</view>
				<input class="card-input input-title" v-model="bankCardNumber" placeholder="请输入银行卡卡号" name="input" type="number"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">持卡人姓名</view>
				<input class="card-input" v-model="cardholder" placeholder="请输入持卡人姓名" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">银行名称</view>
				<input class="card-input input-title" v-model="bandCardName" placeholder="请输入银行卡银行名称" name="input"></input>
			</view>
		</form>

		<view class="submit-band-card" @tap="bandCard">绑定银行卡</view>
	</view>
</template>

<script>
	import {bankadd} from '@/api/index.js'
	export default {
		data() {
			return {
				bankCardNumber: "",//银行卡卡号
				cardholder: "",//持卡人姓名
				bandCardName: ""//银行名称
			}
		},
		methods: {
			bandCard() {
				let bankName = this.cardholder//持卡人姓名
				let bankNumber = this.bankCardNumber  //银行卡卡号
				let cardholderName = this.bandCardName  //银行名称
				let data = {
					bankName: bankName,
					bankNumber: bankNumber,
					cardholderName: cardholderName
				}
				if(this.Verification(bankName,bankNumber,cardholderName)){
					bankadd(data).then(res=>{
						console.log(res)
						if(res==null){
							this.$api.msg('银行卡绑定成功');
							setTimeout(()=>{
								uni.redirectTo({
									url: 'my_bank_card'
								})
							},1000)	
						}
					})
				}
				
			},
			Verification(bankName,bankNumber,cardholderName){
				if(bankName===''){
					this.$api.msg('请输入银行名称');
					return false
				}
				if(bankNumber===''){
					this.$api.msg('请输入银行卡卡号');
					return false
				}
				if(!(/^\d{16}/.test(bankNumber))){
					this.$api.msg('请输入银行卡卡号');
					return false; 
				}
				if(cardholderName===''){
					this.$api.msg('请输入持卡人姓名');
					return false
				}
				return true
			}
		}
	}
</script>

<style>
	input::-webkit-input-placeholder {

		color: rgba(210, 210, 210, 1);
		font-size: 28rpx;
		font-family: PingFangSC-regular;
	}

	.input-title {
		position: relative;
		left: 30rpx;
	}

	.title {
		color: rgba(77, 77, 77, 1);
		font-size: 28rpx;
		font-family: PingFangSC-regular;
	}

	.submit-band-card {
		margin: 108rpx 80rpx 0rpx 80rpx;
		width: 600rpx;
		height: 80rpx;
		background: url("") no-repeat;
		background-size: 100% 100%;

		text-align: center;
		line-height: 80rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-regular;
	}
</style>
